<!DOCTYPE html>
<html  xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="utf-8">
	<title>AGV 任务配置</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<link rel="stylesheet" href="/oksub.css">
</head>
<body>
<div class="ok-body">
	<!--模糊搜索区域-->
	<div class="layui-row">
		<form class="layui-form ok-search-form layui-form-pane">
			<div class="layui-form-item">
				<div class="layui-inline">
					<label class="layui-form-label">开始位置</label>
					<div class="layui-input-inline">
						<input type="text"    class="layui-input" placeholder="开始位置" autocomplete="off"
							   name="startLocation">
					</div>
				</div>
				<div class="layui-inline">
					<label class="layui-form-label">结束位置</label>
					<div class="layui-input-inline">
						<input type="text"  class="layui-input" placeholder="开始位置" autocomplete="off"
							   name="endLocation">
					</div>
				</div>

				<div class="layui-inline">
					<label class="layui-form-label">状态</label>
					<div class="layui-input-inline">
						<label>
							<select name="state" >
								<option  value="">选择对应的状态</option>
								<option  value="1" >开启</option>
								<option  value="0" >关闭</option>
							</select>
						</label>
					</div>
				</div>
				<div class="layui-inline">
					<div class="layui-input-inline">
						<button class="layui-btn" lay-submit="" lay-filter="search">
							<i class="layui-icon">&#xe615;</i>
						</button>
					</div>
				</div>
			</div>
		</form>
	</div>
	<!--数据表格-->
	<table class="layui-hide" id="tableId" lay-filter="tableFilter"></table>
</div>
<!--js逻辑-->
<script src="/layui/layui.js"></script>
<script>

	layui.use(["element", "jquery", "table", "form", "laydate", "okLayer"], function () {
		let table = layui.table;
		let form = layui.form;
		let laydate = layui.laydate;
		let layer = layui.layer
		let $ = layui.jquery;


		laydate.render({elem: "#startTime", type: "datetime"});
		laydate.render({elem: "#endTime", type: "datetime"});

		let userTable = table.render({
			elem: '#tableId',
			url: '/data/getAllAgvTaskByPage',
			limit: 20,
			toolbar: true,
			toolbar: "#toolbarTpl",
			size: "sm",
			page: true,
			cols: [
				[
					{type: "checkbox", fixed: "left"},
					{field: "id", title: "ID", minWidth: 60,hide:true},
					{field: "createTime", title: "创建时间", minWidth: 100,sort:true},
					{field: "taskName", title: "名称", minWidth: 100},
					{field: "plcMonitorOffset", title: "监控偏移地址", minWidth: 100},
					{field: "plcFinishOffset", title: "完成偏移地址", minWidth: 100},
					{field: "startLocation", title: "开始位置", minWidth: 100},
					{field: "endLocation", title: "结束位置", minWidth: 100},
					{field: "template", title: "运行模板", minWidth: 100},
					{field: "updateTime", title: "修改时间", minWidth: 100,sort:true},
					{field: "state", title: "状态", minWidth: 150,sort:true, templet: "#statusTpl"},
					{field: "remark", title: "备注", minWidth: 150,},
					{title: "操作", width: 150, align: "center", fixed: "right", templet: "#operationTpl"}
				]
			],
			done: function (res, curr, count) {
				//console.info(res, curr, count);
			}
		});
		table.on("toolbar(tableFilter)", function (obj) {
			switch (obj.event) {
				case "modify":
					layer.open({
						type: 2,
						title: '修改系统配置',
						shadeClose: true,
						maxmin: true, //开启最大化最小化按钮
						area: ['900px', '600px'],
						content: '/sysConfig',
						end: function () {
							// 刷新主页面
							location.reload();
						}
					});
					break;
				case "add":
					layer.open({
						type: 2,
						title: '任务添加',
						shadeClose: true,
						maxmin: true, //开启最大化最小化按钮
						area: ['900px', '600px'],
						content: '/addAgvTask',
						end: function () {
							// 刷新主页面
							location.reload();
						}
					});
					break;
				case "reboot":
					layer.confirm('是否需要应用所有的设置？', {icon: 3}, function(){
						layer.alert('倒计时结束后将自动刷新应用,请不要关闭此窗口！', {
							time: 10*1500,
							success: function(layero, index){
								var timeNum = this.time/1000, setText = function(start){
									layer.title('<span class="layui-font-red">'+ (start ? timeNum : --timeNum) + '</span> 秒后自动刷新', index);
								};
								setText(!0);
								this.timer = setInterval(setText, 1000);
								if(timeNum <= 0) clearInterval(this.timer);
								$.ajax({
									url:'/restart',
									type:'get',
									success: function (response) {
										console.log(response)
									}
								});
							},
							end: function(){
								clearInterval(this.timer);

								location.reload();
							}
						});

					}, function(){
					});
					break;
				case "logs":
					window.open("/logsIndex", '_blank');
					break;
				case "batchReplace":
					var checkStatus = table.checkStatus("tableId");
					var names = "";
					if (checkStatus.data.length <= 0){
						layer.msg('未选择有效数据');
					}else{
						layer.open({
							type: 2,
							title: '任务修改',
							shadeClose: true,
							maxmin: true, //开启最大化最小化按钮
							area: ['900px', '600px'],
							content: '/batchReplace',
							success:function (layero){
								let iframeWin = window[layero.find("iframe")[0]["name"]];
								iframeWin.initForm(checkStatus.data);
								console.log(checkStatus.data);
							},
							end: function () {
								// 刷新主页面
								location.reload();
							}
						});

					}
					break;

			}
		});
		table.on("tool(tableFilter)", function (obj) {
			let data = obj.data;
			switch (obj.event) {
				case "edit":
					layer.open({
						type: 2,
						title: '任务修改',
						shadeClose: true,
						maxmin: true, //开启最大化最小化按钮
						area: ['900px', '600px'],
						content: '/modifyAgvTask/'+data.id,
						end: function () {
							// 刷新主页面
							location.reload();
						}
					});
					break;
				case "del":
					layer.confirm('是否要删除？删除无法恢复。', {
						btn: ['删除', '关闭'], //按钮
						title: '高危操作', // 设置标题
					}, function(){
						$.ajax({
							url:'/data/delAGVTask',
							type:'POST',
							data: {id:data.id},
							success: function (response) {
								if (response.code===200){
									layer.msg(response.msg);
									userTable.reload()
								}else{
									layer.msg(response.msg);
								}
							}
						});
					}, function(){

					});
					break;
			}
		});

		form.on("submit(search)", function (data) {
			/*var result = JSON.stringify(data.field);
            layer.alert(result, {
                title: '最终的搜索信息'
            });*/
			userTable.reload({
				where: data.field,
				page: {curr: 1}
			});

			return false;
		});

	})
</script>
<!-- 头工具栏模板 -->
<script type="text/html" id="toolbarTpl">
	<div class="layui-btn-container">
		<button class="layui-btn layui-btn-sm " lay-event="add">添加任务</button>
		<button class="layui-btn layui-btn-sm layui-btn-normal" lay-event="modify">配置修改</button>
		<button class="layui-btn layui-btn-sm layui-btn-primary layui-border-red" lay-event="reboot">应用所有设置</button>
		<button class="layui-btn-sm layui-btn layui-btn-primary layui-border-orange" lay-event="batchReplace">批量替换</button>
		<button class="layui-btn-sm layui-btn layui-btn-primary layui-border-blue" lay-event="logs">打开日志</button>
	</div>
</script>

<script type="text/html" id="statusTpl">
	{{#  if(d.state == 1){ }}
	<span class="layui-btn layui-btn-normal layui-btn-xs">启用</span>
	{{#  } else if(d.state == 0) { }}
	<span class="layui-btn layui-btn-warm layui-btn-xs">停用</span>
	{{#  } }}
</script>

<script type="text/html" id="operationTpl">
	<a href="javascript:" title="编辑" lay-event="edit"><i class="layui-icon">&#xe642;</i></a>
	<a   href="javascript:" title="删除" lay-event="del"><i class="layui-icon">&#xe640;</i></a>
</script>
</body>
</html>
